JavaServer Pages (JSP) Basics اساسيات صفحات خادم جافا (JSP)

Sang Shin , sang.shin@sun.com , www.javapassion.com/j2ee سانغ شين ، sang.shin @ sun.com ، www.javapassion.com/j2ee



The goal of this hands-on lab is to exercise basic features of JSP, especially focusing on the features of the JSP 1.2.  You are going to build, run, and modify TomcatJSPExample sample application using NetBeans. والهدف من هذا التدريب العملي في المختبر هو التمرن على الإعدادات الأساسية لJSP ، ولا سيما التركيز على إعدادات JSP 1.2. سنقوم ببناء و تشغيل و تعديل التطبيق العينة tomcatjspexample باستخدام netbeans.

Expected duration: 90 minutes (excluding homework) من المتوقع ان تكون المده اللازمة بإذن الله : 90 دقيقة (باستثناء العمل المنزلي)


Software Needed البرامج اللازمة

Before you begin, you need to install the following software on your computer. قبل أن نبدأ، لا بد من تثبيت البرامج التالية على جهاز الكمبيوتر الخاص بك.


OS platforms you can use اذا اردت يمكنك استخدام المنصات التالية


Change Log سجل التحديثات


Lab Exercises مخبر التمارين



Exercise 1: Build and run HelloWorld JSP Application تمرين 1 : بناء وتشغيل تطبيق HelloWorld : JSP

In this exercise, you are going to create a simple HelloWorld JSP application whose NetBeans project name is set as " hello1 ". وفي هذه التمرين، سنقوم بإنشاء تطبيق JSP بسيط HelloWorld, اسم مشروع Netbeans هو "hello1".

  1. Open, build, and run "hello1" sample JSP application فتح و بناء و تشغيل عينة من تطبيق "hello1" : JSP
  2. Modify "hello1" sample JSP application to display hobby field تعديل عينة من تطبيق "hello1" : JSP بغرض عرض حقل Hobby (هوايه)

    (1.1) Open, build, and run "hello1" sample JSP application (1.1) فتح و بناء و تشغيل عينة من تطبيق "hello1" : JSP

    0. Start NetBeans IDE. شغل بيئة التطوير المتكاملة Netbeans
    1. Open hello1 NetBeans project. إفتح مشروع Hello1 : Netbeans .

    2 Build and run hello1 project. 2 بناء وتشغيل المشروع hello1.



    Figure-1.12: Running hello1 projectالرسم - 1.12 : تشغيل مشروع hello1


    (1.2) Modify the application to display "hobby" (1.2) تعديل التطبيق بغرض عرض حقل الهواية "hobby"


    In this step, you are going to modify the hello1 application to ask a hobby of a user and then redisplay it. في هذه الخطوة، سنقوم بتعديل تطبيق hello1 حيث سنقوم بسؤال المستخدم عن هوايته وبعد ذلك سنقوم باعادة عرض التطبيق.

    1. Double click index.jsp under hello1->Web Pages to open in the source editor. انقر نقرأ مزدوجا فوق index.jsp تحت hello1 ->Web Pages ليتم فتح الصفحة في محرر نص المصدر.



    2. Modify index.jsp as shown in Code-1.13 below. تعديل index.jsp على النحو المبين في المصدر البرمجي - 1.13 ادناه.

    <%------------------ commented out for now ---------------------------
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
    ---------------------------------------------------------------------%>
    <html>
        <head><title>Hello</title></head>
        <body bgcolor="white">
            <img src="duke.waving.gif">
            <h2>Hello, my name is Duke. My hobby is Golf. What are your name and hobby?</h2>
            <form method="get">
                <input type="text" name="username" size="25">
                <input type="text" name="hobby" size="25">
                <p></p>
                <input type="submit" value="Submit">
                <input type="reset" value="Reset">
            </form>

            <%
                String username = request.getParameter("username");
                if ( username != null && username.length() > 0 ) {
            %>
            <%@include file="response.jsp" %>
            <%
                    }
            %>
           
            <%------------ commented out for now ------------
            <c:if test="${fn:length(param.username) > 0}" >
                <%@include file="response.jsp" %>
            </c:if>
            -------------------------------------------------%>
        </body>
    </html>
    Code-1.13: Modified index.jsp المصدر البرمجي - 1.13 : تعديل index.jsp

    3. Modify response.jsp under hello1->Web Pages as shown in Code-1.14 below. تعديل response.jsp تحت hello1 -> Web Pages على النحو المبين في المصدر البرمجي - 1.14 ادناه.

    <h2><font color="black">Hello, ${param.username}!</font></h2>
    <h2><font color="black">Your hobby is ${param.hobby}!</font></h2>
    Code-1.14: Modified ResponseServlet.java نص برمجي - 1.14 : تعديل ResponseServlet.java

    4. Right-click hello1 project and select Run . انقر بالزر الايمن على مشروع hello1 واختر Run
    5. Type in a name and hobby into the blank fields.  Clock Submit button. أدخل الإسم و الهوايه في المجالات الفارغه. إنقر على زر Submit
    6. Observe the name and hobby you typed are displayed. لاحظ كيف تم عرض الإسم و الهوايه . (Figure-1.15 below) (الشكل ادناه - 1.15)


    Figure-1.15: Result of running the applicationالرسم - 1.15 : نتيجة تشغيل التطبيق

    Summary خلاصة

    In this exercise,  you have built and run a simplest possible Web application that contains two JSP files, index.jsp and response.jsp. في هذا التمرين، قمنا ببناء و تشغيل تطبيق شبكة يحتوي على ملفان index.jsp : JSP و response.jsp بأبسط طريقة ممكنة.

    return to the top عودة الى الاعلى



    Exercise 2: Build and run "JSP 1.2" part of the "JSP Examples" sample application تمرين 2 : بناء وتشغيل جزء "JSP1.2" من عينة تطبيق "JSP Examples"

    In this exercise, you are going to build and run "JSP 1.2" part of the "JSP Examples" sample application that comes with NetBeans. في هذا التمرين، سنقوم ببناء و تشغيل جزء "JSP1.2" من عينة تطبيق "JSP Examples التي توزع مع Netbeans.


    (2.1) Build and run "JSP Examples" sample application (2.1) بناء و تشغيل عينة التطبيق "JSP Examples"


    1. Create a new NetBeans project from the sample app that comes with NetBeans انشاء مشروع Netbeans جديد من عينه التطبيق الذي يوزع مع إصدار Netbeans


    Figure-2.10: Create a new NetBeans projectالرسم - 2.10 : انشاء مشروع Netbeans جديد

    2. Under New Sample Web Application dialog box, accept the default project name and other values and click Finish في مربع الحوار New Sample Web Application، قم بتقبل إسم المشروع الافتراضي و القيم الأخرى ثم انقر فوق Finish



    3. Right click JSPExamples project node and select Run . انقر بزر الفأرة الايمن على عقده المشروع JspExamples واختر Run.



    4. Observe that the browser gets displayed.  Scroll down to the section with JSP 1.2 Examples . نلاحظ ظهور المتصفح. انزل الى قسم JSP 1.2 Examples
    5. Click Execute to execute the " Date " example. انقر فوق Execute لتنفيذ مثال "Date". (Figure-2.12 below) (الشكل ادناه - 2.12)
    6. Click Source to see the corresponding source code. انقر فوق Source لتتمكن من رؤية شيفرة المصدر. (Figure-2.12 below) (الشكل ادناه - 2.12)


    Figure-2.12: TomcatJSPExample applicationالرسم - 2.12 : تطبيق TomcatJSPExample



    (2.2) Modify "Date" part of the application (2.2) تعديل جزء "Date" من التطبيق


    In this step, you are going to "Date" part of the application to display "Years from 1992". في هذه الخطوة، سنذهب الى جزء "Date" من تطبيق لنقوم بعرض "Years from 1992"

    1. Modify JspCalendar.java under TomcatJSPExample->Source Packages->dates as shown in Code-2.20 below.  The code fragments that need to be added are highlighted in bold and blue colored font. تعديل JSPCalendar.java تحت TomcatJSPExample -> Source Packages -> dates على النحو المبين في الشيفرة المصدرية - 2.20 ادناه. الأجزاء التي تحتاج الى اضافة تبرز باللون الازرق.

    package dates;

    import java.text.DateFormat;
    import java.util.*;

    public class JspCalendar {
        Calendar  calendar = null;
       
        public JspCalendar() {
            calendar = Calendar.getInstance();
            Date trialTime = new Date();
            calendar.setTime(trialTime);
        }
       
        public int getYear() {
            return calendar.get(Calendar.YEAR);
        }

        public int getYearsFrom1992() {
            return calendar.get(Calendar.YEAR) - 1992 ;
        }
       
        public String getMonth() {
            int m = getMonthInt();
            String[] months = new String [] { "January", "February", "March",
            "April", "May", "June",
            "July", "August", "September",
            "October", "November", "December" };
            if (m > 12)
                return "Unknown to Man";
           
            return months[m - 1];
           
        }
       
        public String getDay() {
            int x = getDayOfWeek();
            String[] days = new String[] {"Sunday", "Monday", "Tuesday", "Wednesday",
            "Thursday", "Friday", "Saturday"};
           
            if (x > 7)
                return "Unknown to Man";
           
            return days[x - 1];
           
        }
       
        public int getMonthInt() {
            return 1 + calendar.get(Calendar.MONTH);
        }
       
        public String getDate() {
            return getMonthInt() + "/" + getDayOfMonth() + "/" +  getYear();
           
        }
       
        public String getTime() {
            return getHour() + ":" + getMinute() + ":" + getSecond();
        }
       
        public int getDayOfMonth() {
            return calendar.get(Calendar.DAY_OF_MONTH);
        }
       
        public int getDayOfYear() {
            return calendar.get(Calendar.DAY_OF_YEAR);
        }
       
        public int getWeekOfYear() {
            return calendar.get(Calendar.WEEK_OF_YEAR);
        }
       
        public int getWeekOfMonth() {
            return calendar.get(Calendar.WEEK_OF_MONTH);
        }
       
        public int getDayOfWeek() {
            return calendar.get(Calendar.DAY_OF_WEEK);
        }
       
        public int getHour() {
            return calendar.get(Calendar.HOUR_OF_DAY);
        }
       
        public int getMinute() {
            return calendar.get(Calendar.MINUTE);
        }
       
       
        public int getSecond() {
            return calendar.get(Calendar.SECOND);
        }
       
        public static void main(String args[]) {
            JspCalendar db = new JspCalendar();
            p("date: " + db.getDayOfMonth());
            p("year: " + db.getYear());
            p("years from 1992: " + db.getYearsFrom1992());
            p("month: " + db.getMonth());
            p("time: " + db.getTime());
            p("date: " + db.getDate());
            p("Day: " + db.getDay());
            p("DayOfYear: " + db.getDayOfYear());
            p("WeekOfYear: " + db.getWeekOfYear());
            p("era: " + db.getEra());
            p("ampm: " + db.getAMPM());
            p("DST: " + db.getDSTOffset());
            p("ZONE Offset: " + db.getZoneOffset());
            p("TIMEZONE: " + db.getUSTimeZone());
        }
       
        private static void p(String x) {
            System.out.println(x);
        }
       
       
        public int getEra() {
            return calendar.get(Calendar.ERA);
        }
       
        public String getUSTimeZone() {
            String[] zones = new String[] {"Hawaii", "Alaskan", "Pacific",
            "Mountain", "Central", "Eastern"};
           
            return zones[10 + getZoneOffset()];
        }
       
        public int getZoneOffset() {
            return calendar.get(Calendar.ZONE_OFFSET)/(60*60*1000);
        }
       
       
        public int getDSTOffset() {
            return calendar.get(Calendar.DST_OFFSET)/(60*60*1000);
        }
       
       
        public int getAMPM() {
            return calendar.get(Calendar.AM_PM);
        }
    }
    Code-2.20: Modified JspCalendar.java الشيفرة المصدرية - 2.20 : تعديل JSPCalendar.java

    2. Modify date.jsp under TomcatJSPExample->Web Pages->dates as shown in Code-2.20 below.  The code fragments that need to be added are highlighted in bold and blue colored font. تعديل date.jsp تحت TomcatJSPExample -> Web Pages -> dates على النحو المبين في الشيفرة المصدرية - 2.20 ادناه. الأجزاء التي تحتاج الى اضافة تبرز باللون الازرق.

    <%@ page session="false"%>

    <body bgcolor="white">
    <jsp:useBean id='clock' scope='page' class='dates.JspCalendar' type="dates.JspCalendar" />

    <font size=4>
    <ul>
    <li>    Day of month: is  <jsp:getProperty name="clock" property="dayOfMonth"/>
    <li>    Year: is  <jsp:getProperty name="clock" property="year"/>
    <li>    Years from 1992: is  <jsp:getProperty name="clock" property="yearsFrom1992"/>
    <li>    Month: is  <jsp:getProperty name="clock" property="month"/>
    <li>    Time: is  <jsp:getProperty name="clock" property="time"/>
    <li>    Date: is  <jsp:getProperty name="clock" property="date"/>
    <li>    Day: is  <jsp:getProperty name="clock" property="day"/>
    <li>    Day Of Year: is  <jsp:getProperty name="clock" property="dayOfYear"/>
    <li>    Week Of Year: is  <jsp:getProperty name="clock" property="weekOfYear"/>
    <li>    era: is  <jsp:getProperty name="clock" property="era"/>
    <li>    DST Offset: is  <jsp:getProperty name="clock" property="DSTOffset"/>
    <li>    Zone Offset: is  <jsp:getProperty name="clock" property="zoneOffset"/>
    </ul>
    </font>

    </body>
    </html>
    Code-2.21:Display Years from 1992 الشيفرة المصدرية - 2.21 : عرض Years from 1992

    3. Right click TomcatJSPExample project node and select Run . انقر بزر الفأرة الايمن على عقده المشروع TomcatJSPExample واختر Run
    4. Observe that the browser gets displayed.  Scroll down to the section with JSP 1.2 Examples . لاحظ ظهور المتصفح. انزل الى قسم JSP 1.2 Examples
    5. Click Execute to execute the " Date " example. انقر فوق Execute لتنفيذ مثال "Date" . (Figure-2.22 below) (الشكل ادناه - 2.22)


    Figure-2.22: Result of running the applicationالرسم - 2.22 : نتيجة تشغيل التطبيق


    (2.3) Modify "ErrorPage" example part of the application (2.3) تعديل جزء "ErrorPage" من التطبيق المثال


    In this step, you are going to display your own Error page when there occurs an error.  If you are using IE7, please see the Trouble-shooting below. في هذه الخطوة ، سنقوم بعرض صفحه الخطأ الخاصة بك عند حدوث خطأ. إذا كنت تستخدم ie7، يرجى الاطلاع على حل المشاكل ادناه.

    1.  Create myOwnErrorpage.jsp under TomcatJSPExample->Web Pages->error . 1. قم بإنشاء Myownerrorpage.jsp تحت إطار TomcatJSPExample -> Web Pages -> error.

    Figure-2.30: Create myOwnErrorPage.jsp الشكل - 2.30 : إنشاء myownerrorpage.jsp

    2. Replace the IDE generated myOwnErrorpage.jsp with the code in Code-2.31 below.  This is a modified copy of the errorpage.jsp . أبدل الملف myownerrorpage.jsp المولد من قبل بيئة التطوير المتكاملة IDE بالشيفرة المصدرية 2.31 أدناه. إنها نسخة معدلة من errorpage.jsp.

    <html>
    <!--
      Copyright 2004 The Apache Software Foundation

      Licensed under the Apache License, Version 2.0 (the "License");
      you may not use this file except in compliance with the License.
      You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.
    -->

    <body bgcolor="blue">

        <%@ page isErrorPage="true" %>
        <h1> This is my own error page and the exception <%= exception.getMessage() %> tells me you
             made a wrong choice.
    </body>
    </html>
    Code-2.31: myOwnErrorpage.jsp الشيفرة المصدرية - 2.31 : myownerrorpage.jsp

    3. Modify err.jsp under under TomcatJSPExample->Web Pages->error . تعديل err.jsp تحت TomcatJSPExample -> Web Pages -> error. The code fragments that need to be added are highlighted in bold and blue colored font. سنقوم بإضافة إجزاء الشيفرة التي تبرز واضحة باللون الازرق

    <body bgcolor="lightblue">

        <%@ page errorPage="myOwnErrorpage.jsp" %>
        <jsp:useBean id="foo" scope="request" class="error.Smart" />
        <%
            String name = null;

            if (request.getParameter("name") == null) {
        %>
        <%@ include file="/error/error.html" %>
        <%
            } else {
              foo.setName(request.getParameter("name"));
              if (foo.getName().equalsIgnoreCase("integra"))
                  name = "acura";
              if (name.equalsIgnoreCase("acura")) {
        %>

        <H1> Yes!!! <a href="http://www.acura.com">Acura</a> is my favorite car.

        <%
              }
            }   
        %>   
    </body>
    </html>
    Code-2.32: Modified err.jsp الشيفرة المصدرية - 2.32 : تعديل err.jsp

    3. Right click TomcatJSPExample project node and select Run . انقر بزر الفأرة الايمن على عقده المشروع TomcatJSPExample و اختر Run
    4. Observe that the browser gets displayed.  Scroll down to the section with JSP 1.2 Examples . لاحظ ظهور المتصفح. انزل الى قسم JSP 1.2 Examples
    5. Click Execute to execute the " ErrorPage " example. انقر فوق Execute لتنفيذ مثال "ErrorPage".
    6. Select BMW 328i from the drop-down list. اختر من القائمة المنسدله BMW 328i
    7. Observe that myOwnErrorpage.jsp is displayed on the browser. لاحظ ظهور Myownerrorpage.jsp على المتصفح. (Figure-2.33 below) (الشكل ادناه - 2.33)


    Figure-2.33: Result of running the applicationالرسم - 2.33 : نتيجة تشغيل التطبيق

    Trouble-shooting :  If you are using IE6 and experience "Internal Server" error condition, do Tools-Internet Options-Advanced tab-uncheck "Show friendly HTTP error message" حل المشاكل : اذا كنت تستخدم ie6 و عندك تجربه بالمشاكل الشرطية* "Internal Server"، قم بتعطيل خيار "Show friendly HTTP error message" التي تجدها في الخيارات المتقدمة في خيارات انترنت


    (2.4) Modify "Include" part of the sample application (2.4) تعديل جزء "Include" من التطبيق العينه


    1. Run the " Include " part of the sampe application. شغل جزء "Include" من عينة التطبيق .





    2. Create a new JSP file, called foo1.jsp under JSPExamples->Web Pages->include .  The code fragments that need to be changed from the IDE generated JSP file are highlighted in bold and blue colored font. إنشاء ملف JSP جديد ، و إستدعاء foo1.jsp تحت JSPExamples -> Web Pages -> include. الأجزاء التي سنقوم بتغييرها في ملف JSP الذي قامت بتوليده بيئة التطوير المتكاملة هي الأجزاء البارزة باللون الازرق


    <%@page contentType="text/html"%>
    <%@page pageEncoding="UTF-8"%>


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>JSP Page</title>
        </head>
        <body>
        <h1>This is foo1.jsp</h1>
       
       
       
       
        </body>
    </html>
    Code-2.40: foo1.jsp الشيفرة المصدرية - 2.40 : foo1.jsp

    3. Modify include.jsp under JSPExamples->Web Pages->include .  The code fragments that need to be changed from the IDE generated JSP file are highlighted in bold and blue colored font. تعديل include.jsp تحت JSPExamples -> Web Pages -> include. الأجزاء التي سنقوم بتغييرها في الملف الذي ولدته بيئة التطوير المتكاملة تبرز باللون الازرق

    <html>
    <!--
      Copyright 2004 The Apache Software Foundation

      Licensed under the Apache License, Version 2.0 (the "License");
      you may not use this file except in compliance with the License.
      You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.
    -->

    <body bgcolor="white">

    <font color="red">

    <%@ page buffer="5kb" autoFlush="false" %>

    <p>In place evaluation of another JSP which gives you the current time:

    <%@ include file="foo.jsp" %>
    <%@ include file="foo1.jsp" %>

    <p> <jsp:include page="/include/foo.html" flush="true"/> by including the output of another JSP:

    <jsp:include page="foo.jsp" flush="true"/>
    <jsp:include page="foo1.jsp" flush="true"/>

    :-)

    </html>
    Code-2.41: Modified include.jsp الشيفرة المصدرية - 2.41 : تعديل include.jsp

    4. Run the application again. شغل التطبيق مرة اخرى.


    Figure-2.42: Resultالرسم - 2.42 : النتيجة


    (2.5) Modify "Forward" part of the application (2.5) تعديل "الى الامام" جزء من الطلب


    1. Run the " Forward " part of the sampe application. شغل جزء "Forward" من التطبيق العينة.
    2. Create a new JSP file, called three.jsp under JSPExamples->Web Pages->forward .  Replace the IDE generated JSP file with the one in Code-2.50 below. إنشاء ملف JSP جديد، و استدعاء three.jsp تحت JSPExamples -> Web Pages -> forward. و إبدال الملف الذي ولده بيئة التطوير المتكاملة بالشيفرة المصدرية - 2.50 المدون ادناه.

    <html>
    <!--
      Copyright (c) 1999 The Apache Software Foundation.  All rights
      reserved.
    -->

    <body bgcolor="white">
    <font color="red">

    <h3> This is page number three </h3>

    VM Memory usage (from three.jsp)  < 80%.
    </html>
    الشيفرة المصدرية - 2.50 : three.jsp

    3. Modify forward.jsp under JSPExamples->Web Pages->forward .  The code fragments that need to be changed from the IDE generated JSP file are highlighted in bold and blue colored font. تعديل forward.jsp تحت JSPExamples -> Web Pages -> forward. الأجزاء التي سنقوم بتغييرها من الملف الذي أنشأهته بيئة التطوير المتكاملة هي التي تبرز واضحة باللون الازرق

    <html>
        <!--
        Copyright (c) 1999 The Apache Software Foundation.  All rights
        reserved.
        -->

        <%
            double freeMem = Runtime.getRuntime().freeMemory();
            double totlMem = Runtime.getRuntime().totalMemory();
            double percent = freeMem/totlMem;
            if (percent < 0.5) {
        %>

        <jsp:forward page="/forward/one.jsp"/>

        <% } else {
                       if (percent < 0.8) { %>
                            <jsp:forward page="two.html"/>
               <%   } else { %>
                            <jsp:forward page="three.jsp"/>
               <%   } %>

        <% } %>

    </html>
    Code-2.51: Modified forward.jsp الشيفرة المصدرية - 2.51 : تعديل forward.jsp

    4. Run the application again.  If the percent is above or equal to 0.8, you should see the Figure-2.52 below. شغل التطبيق مرة اخرى. إذا كانت النسبه أقل او تساوي 0.8 ، فسيظهر الشكل - 2.52 ادناه.


    Figure-2.52: three.jsp is displayed as a result of forwardingالرسم - 2.52 : three.jsp عرض نتيجة الإحالة

    (2.6) Modify "Snoop" part of the application (2.6) تعديل جزء "snoop" من التطبيق


    1. Run the " Snoop " part of the sampe application. تشغيل جزء"snoop" من التطبيق العينة.
    2. Observe the result as shown in Figure-2.60 below. لاحظ النتيجة كما هو مبين في الشكل ادناه - 2.60.


    Figure-2.60: The fields of the HTTP request are displayedالرسم - 2.60 : ظهور مجالات طلب HTTP

    3. From the browser, type append a query string as shown in Code-2.61 below. من المستعرض، أدخل مقطع الإستعلام مثل هذا المبين في الشيفرة المصدرية - 2.61 ادناه.

    http://localhost:8084//snp/snoop.jsp?name=sang http://localhost:8084//snp/snoop.jsp؟name=sang
    Figure-2.61: Send a query stringالرسم - 2.61 : أرسل مقطع الإستعلام

    4. Refresh the browser. قم بتحديث المتصفح.
    5. Observe that the query string is displayed as shown in Figure-2.61 below. لاحظ ان مقطع الإستعلام يتم عرضها كما هو مبين في الشكل ادناه - 2.61.


    Figure-2.61: New query string is displayedالرسم - 2.61 : ظهور مقطع إستعلام جديدة

    (2.7) Study "JSP Servlet JSP" part of the application (2.7) دراسة جزء "JSP Servlet JSP" من التطبيق


    The "JSP Servlet JSP" part of the application shows how JSP and Servlets are being forwarded each other.  When you clickthe Execute , it will invoke jsptoservlet.jsp , which in turn forward the control to servletToJsp servlet, which in turn forwards the control to hello.jsp . جزء "JSP Servlet JSP" من التطبيق يبين كيف تتم الإحالة بين JSP و Servlets. عندما تنقر على Execute، سيتم إستدعاء jsptoservlet.jsp الذي بدوره يحيل التحكم إلى servletToJsp Servlet و الذي بدوره يحيل التحكم الى hello.jsp

    1. Run the " JSP Servlet JSP " part of the sampe application. تشغيل جزء "JSP Servlet JSP" من التطبيق العينة.
    2. Observe the result as shown in Figure-2.60 below. لاحظ النتيجة كما هو مبين في الشكل ادناه - 2.60.


    Figure-2.70: Result of running "JSP Servlet JSP" part of the application.الرسم - 2.70 : نتيجة تشغيل جزء "JSP Servlet JSP" من التطبيق.

    3. Open jsptoServlet.jsp under JSPExamples->Web Pages->jsptoserv . إفتح Jsptoservlet.jsp تحت JSPExamples -> Web Pages -> jsptoserv.
    4. Observe that the control is forwarded to /servletToJsp url-pattern.  (Code-2.71 below) لاحظ إحالة التحكم إلى المسار التسلسلي / servlettojsp. (الشيفرة المصدرية - 2.71 ادناه)

    <html>
    <!--
      Copyright 2004 The Apache Software Foundation

      Licensed under the Apache License, Version 2.0 (the "License");
      you may not use this file except in compliance with the License.
      You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.
    -->
    <body bgcolor="white">

    <!-- Forward to a servlet -->
    <jsp:forward page="/servletToJsp" />

    </html>
    Code-2.71: Control is now forwarded to servletToJsp. الشيفرة المصدرية - 2.71 : التحكم الان احيل الى servlettojsp

    5. Open web.xml under JSPExamples->Web Pages->WEB-INF . إفتح Web.xml تحت JSPExamples -> Web Pages -> WEB-INF
    6. Obseve that the /servletToJsp url-pattern is mapped to a Servlet class called servletToJsp (The code fragment in the Code-2.72 below starts from line number 106 of the web.xml file.) لاحظ ان المسار التسلسلي / servlettojsp معينة لقسم Servlet تدعى servletToJsp (جزء الشيفرة المصدرية من الشيفرة المصدرية - 2.72 ادناه تبدأ إنطلاقا من السطر رقم 106 من ملف web.xml.)

        <!-- Define servlets that are included in the example application -->

        <servlet>
          <servlet-name>servletToJsp</servlet-name>
          <servlet-class>servletToJsp</servlet-class>
        </servlet>

        <servlet>
            <servlet-name>CompressionFilterTestServlet</servlet-name>
            <servlet-class>compressionFilters.CompressionFilterTestServlet</servlet-class>
        </servlet>

        <servlet-mapping>
            <servlet-name>CompressionFilterTestServlet</servlet-name>
            <url-pattern>/CompressionTest</url-pattern>
        </servlet-mapping>

        <servlet-mapping>
            <servlet-name>servletToJsp</servlet-name>
            <url-pattern>/servletToJsp</url-pattern>
        </servlet-mapping>
    Code-2.72: Servlet mapping الشيفرة المصدرية - 2.72 : رسم خريطة Servlet

    7. Open servletToJsp.java under TomcatJSPExample->Source Packages-><default package> . إفتح Servlettojsp.java تحت TomcatJSPExample -> Source Packages -> <defaultpackage>
    8. Observe that the a new attribute called "servletName" is added to the HttpServletRequest object and then control is forwarded to /jsptoserv/hellp.jsp .  (Code-2.73 below) لاحظ ان الخاصية الجديدة التي تدعى "servletname" قد أضيف الى كائن HttpServletRequest وبعد ذلك تمت إحالة التحكم الى / jsptoserv / hellp.jsp. (الشيفرة المصدرية - 2.73 ادناه)

    import javax.servlet.*;
    import javax.servlet.http.*;

    public class servletToJsp extends HttpServlet {

        public void doGet (HttpServletRequest request,
                   HttpServletResponse response) {

        try {
            // Set the attribute and Forward to hello.jsp
            request.setAttribute ("servletName", "servletToJsp");
            getServletConfig().getServletContext().getRequestDispatcher("/jsptoserv/hello.jsp").forward(request, response);
        } catch (Exception ex) {
            ex.printStackTrace ();
        }
        }
    }
    Code-2.73: servetToJsp.java الشيفرة المصدرية - 2.73 : servettojsp.java

    9. Open hello.jsp under TomcatJSPExample->Web Pages->jsptoserv إفتح hello.jsp تحت TomcatJSPExample -> Web Pages -> jsptoserv
    10. Observe that hello.jsp displays the value of the newly added attribute called servletName in the servletToJsp.java . لاحظ أن hello.jsp تقوم بعرض قيمة الخاصية المضافه حديثا و التي تدعى servletname في servlettojsp.java.

    <html>
    <!--
      Copyright 2004 The Apache Software Foundation

      Licensed under the Apache License, Version 2.0 (the "License");
      you may not use this file except in compliance with the License.
      You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.
    -->
    <body bgcolor="white">

    <h1>
    I have been invoked by
    <% out.print (request.getAttribute("servletName").toString()); %>
    Servlet.
    </h1>

    </html>
    Code-2.74: hello.jsp الشيفرة المصدرية - 2.74 : hello.jsp


    Summary خلاصة

    In this exercise, you have built and run "JSP Exampless" sample application. وفي هذا التمرين، قمنا بفضل الله و عونه ببناء وتشغيل "JSP Exampless" عينات تطبيقات.

    return to the top عودة الى الاعلى



    Homework Exercise (for people who are taking Sang Shin's "Java EE Programming online course") تمرين الواجب المنزلي (خاص بالمسجلين بهذه الدورة)


    1. 1. The homework is to modify the hello1 project as described below.  (You might want to create a new project by copying the hello1 project.  You can name the homework project in any way you want but here I am going to call it Myhello1 .) يتمثل العمل المنزلي في تعديل مشروع hello1 على النحو المبين ادناه.( قد ترغب في انشاء مشروع جديد عن طريق نسخ مشروع hello1 . يمكنك تسمية المشروع بأي إسم تريد ولكن هنا سأقوم بتسميته Myhello1(
    2 . 2. Send the following files to j2eehomeworks@sun.com with Subject as J2EEHomework-jspbasics ارسال الملفات التالية الى j2eehomeworks@sun.com مع إدراج j2eehomework - jspbasics في حقل Subject

    return to the top عودة الى الاعلى